<template>
  <div class="hsx-department-management">
    <!-- 部门管理 -->
    <div class="hsx-routre-title">
      <div class="routre-title-content">
        <span><i class="el-icon-discount mr10"></i>部门管理</span>><span>{{routerTitle}}</span>
      </div>
    </div>
    <div class="hsx-department-management-content">
      <div class="hsx-department-management w150 fl">
        <el-menu
          default-active="organizationalStructure"
          class="el-menu-vertical-demo lh40"
          @open="handleOpen"
          @close="handleClose"
          :router="true"
          >
          <el-menu-item index="organizationalStructure" v-if="getPermissionControl.organization_manage">
            <i class="el-icon-d-arrow-right hsx-icon "></i>
            <span slot="title">组织架构</span>
          </el-menu-item>
        </el-menu>
      </div>
      <div class="hsx-operation-log-content-inner bgc">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
import {mapGetters} from 'vuex'
export default {
  name: '',
  data(){
    return {
      routerTitle:''
    }
  },
  props:[],
  created(){
    if(this.getPermissionControl.organization_manage) {
      this.$router.push({name:'organizationalStructure'})
    }
  },
  mounted(){

  },
  methods:{
    handleOpen (e) {

    },
    handleClose (e) {

    }
  },
  components:{

  },
  computed:{
    ...mapGetters(['getPermissionControl'])
  },
  watch:{
    '$route': function (newVal, oldVal) {
      if(newVal.meta) {
       this.routerTitle = newVal.meta.title
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='scss' scoped>
.hsx-department-management {
  .hsx-department-management-content {
    .hsx-operation-log-content-inner {
      overflow: auto;
      padding: 15px;
    }
  }
}
</style>
